<script setup>
import { reactive, onMounted } from 'vue'
import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
import api from './utils/api';
const router = useRouter()
const route = useRoute()
const base = reactive({ Title: '' })
onMounted(()=>{
  api.GET('/base').then(res => {
      Object.assign(base, res)
      //this.$i18n.locale = res.Language
    }).catch()
})
function onLogout() {
      api.GET("/logout").then(() => {
        localStorage.removeItem('token')
        router.push('/login')
      })
    }
  
</script>

<template>
  <div id="app">
    <v-app>
      <v-app-bar app clipped-left color="transparent" v-if="route.name !== 'Login'">
        <v-toolbar-title>{{ base.Title }}</v-toolbar-title>
        <v-toolbar-items class="ml-5">
          <v-btn text to="/">{{ $t('header.status') }}</v-btn>
          <v-btn text to="/rank">{{ $t('header.rank') }}</v-btn>
          <v-btn text to="/bulletin">{{ $t('header.bulletin') }}</v-btn>
          <v-btn text @click="onLogout">{{ $t('header.logout') }}</v-btn>

        </v-toolbar-items>
        <v-spacer></v-spacer>
        <!-- switch language -->
        <v-menu bottom left>
          <template v-slot:activator="{ on }">
            <v-btn icon v-on="on">
              <v-icon>mdi-translate</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item v-for="(lang, index) in $i18n.availableLocales"
                         v-bind:key="index"
                         @click="$i18n.locale = lang"
            >{{ lang }}
            </v-list-item>
          </v-list>
        </v-menu>
      </v-app-bar>

      <v-content>
        <router-view/>
      </v-content>

    </v-app>
  </div>
</template>

<style scoped>
</style>
